<template>
  <el-main>
    <div id="myChart"></div>
    <el-upload
  class="upload-demo"
  drag
  action="http://localhost:9528/dev-api/person/work/save"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  </el-main>
</template>
<script>
import * as echarts from "echarts";
import myChart from "@/js/myCharts";
export default {
  name: "Charts",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      //数据集
      var option = {
        //标题
        title: {
          text: "能力图",
          left: "center",
          top: "center",
        },
        tooltip: {},
        legend: {
          data: ["能力值"],
          bottom:0
        },
        radar: {
          name: {
            textStyle: {
              color: "black", //字体颜色
              // backgroundColor:'yellow',//维度的背景颜色
              borderRadius: 3, //弯曲度
              padding: [2, 4],
            },
          },
          //维度
          indicator: [
            { name: "工作能力", max: 100 },
            { name: "工作态度", max: 100 },
            { name: "沟通能力", max: 100 },
            { name: "忠诚度", max: 100 },
            { name: "生活态度", max: 100 },
          ],
        },
        series: [
          {
            name: "个人能力图",
            type: "radar",
            areaStyle: { normal: {} },
            //数据
            data: [{ name: "能力值", value: [60, 90, 94, 85, 88] }],
            itemStyle: {
              normal: {
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      //初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("myChart"),
        "macarons"
      );

      //使用制定的配置项和数据显示图表
      myChart.setOption(option);
    },
  },
};
</script>
<style   scoped>
#myChart {
  width: 450px;
  height: 400px;
  position: absolute;
  top: 200px;
  left: 200px;
}
</style>